<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>动画注册登录页面</title>
<link rel="stylesheet" href="css/login.css">
</head>
<body>

<div class="materialContainer">
    <form th:action="doLogin" method="post">
<div class="box">
<div class="title">登录</div>
<div class="input">
<label for="name">用户名</label>
<input  type="text" name="username" id="name">
<span class="spin"></span>
</div>
<div class="input">
<label for="pass">密码</label>
<input type="password" name="password" id="pass">
<span class="spin"></span>
</div>
<div class="button login">

<button type="submit">
<span>登录</span>
<i class="fa fa-check"></i>
</button>
</div>

<a href="javascript:" class="pass-forgot">忘记密码？</a>
</div>
</form>
<div class="overbox">
<div class="material-button alt-2">
<span id="shape" class="shape"></span>
</div>
<div class="title">注册</div>
<div class="input">
<label for="regname">用户名</label>
<input  type="text" name="regname" id="regname">
<span class="spin"></span>
</div>
<div class="input">
<label for="regpass">密码</label>
<input type="password" name="regpass" id="regpass">
<span class="spin"></span>
</div>
<div class="input">
<label for="reregpass">确认密码</label>
<input type="password" name="reregpass" id="reregpass">
<span class="spin"></span>
</div>
<div class="button">
<button id="register-button">

<span>注册</span>
</button>
</div>
    <div th:if="${param.error}"  th:text="用户名或密码错误"></div>
</div>
</div>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/login.js"></script>
<script>
    $(document).ready(function () {

        $("#name").trigger("click");

        $("#register-button").click(function () {

            var $username = $("#regname").val();
            var $password = $("#regpass").val();
            var $repassword = $("#reregpass").val();

            if ($username == "" || $password == "" || $repassword==""){
                alert("用户名和密码不允许为空！");
            }else {
                if ($password != $repassword){
                    alert("两次密码不一致，请重新输入！")
                }else {
                    $.post("/customer/register",{
                        "username":$username,
                        "password":$password
                    },function (re) {

                        console.log(re);
                        if (re.code == 200){
                            alert(re.msg);

                            $("#shape").trigger("click");

                        }else if (re.code == 500){
                            alert(re.msg);
                        }
                    });
                }
            }

        });
    })
</script>
</body>
</html>